<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>宾馆管理系统表格</title>
  <script src="jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
  <script type="text/javascript">
   function add(){
    let room1 = $("#room1").val();
    let room2 = $("#room2").val();
    let room3 = $("#room3").val();
    let room4 = $("#room4").val();
    let room5 = $("#room5").val();
    let room6 = $("#room6").val();
    
    let count = $("tbody>tr").length +1;
    
    let rowItem = `<tr> 
    <td>${room1}</td> 
    <td>${room2}</td> 
    <td>${room3}</td> 
    <td>${room4}</td> 
    <td>${room5}</td> 
    <td>${room6}</td> 
    <td><button type="button" onclick="del(this)">删除</button></td> 
    </tr>`
    $("tbody").append(rowItem);
   }
   function del(btn){
    $(btn).parent().parent().remove();
   }
  </script>
 </head>
 <body>
  <form>
   客房类型：<input type="text" name="" id="room1" value="" /><br/>
   客房信息：<input type="text" name="" id="room2" value="" /><br/>
   客房查询：<input type="text" name="" id="room3" value="" /><br/>
   客户入住：<input type="text" name="" id="room4" value="" /><br/>
   员工信息：<input type="text" name="" id="room5" value="" /><br/>
   客户结算：<input type="text" name="" id="room6" value="" /><br/>
   <button type="button" onclick="add()">添加</button>
  </form>
  <table border="1px" cellspacing="0" cellpadding="0">
   <thead>
    <th>客房类型</th>
    <th>客房信息</th>
    <th>客房查询</th>
    <th>客户入住</th>
    <th>员工信息</th>
    <th>客户结算</th>
   </thead>
   <tbody>
   </tbody>
  </table>
 </body>
</html>